<template>
    <div style="height:80%" class="zhexian">
        <div class="title">最高额度捐赠次数及对应捐赠人数</div>
       <div id="zhexian" ></div>
    </div>
</template>
<script setup>
import * as echarts from 'echarts';
 import {
        onMounted,
        ref,
        reactive
    } from 'vue'
    onMounted(()=>{
var chartDom = document.getElementById('zhexian');
var myChart = echarts.init(chartDom);
var option;

option = {
  xAxis: {
    nameLocation:'middle',
    name:'捐赠次数',
    type: 'category',
    data: [1,2,3,4,5,7,13],
    nameTextStyle:{
      padding:[20,0,0,0],
    fontSize: 16,
            color: '#333'
    }
  },
  yAxis: {
        nameLocation:'middle',
         nameTextStyle:{
      padding:[0,0,25,0],
      fontSize: 16,
            color: '#333'
    },
     axisLine: { // 设置y轴线的显示
            show: true
        },
    type: 'value',
    name:'该捐赠次数对应人数'
  },
  series: [
    {
      data: [214,30,5,2,3,1,1],
      type: 'bar',
      label:{
        show:true,
        postion:'center'
      }
    }
  ],
};
option && myChart.setOption(option);
    })
</script>
<style  scoped>
#zhexian{
    /* border: 1px solid red; */
    flex: 1;
}
.zhexian{
    display: flex;
    flex-direction: column;
}
.title{
    text-align: center;
    font-weight: bold;
    font-size: 22px;
}
</style>